<template>
  <div>

    <Card>
      <Spin fix size="large" v-if="spinShow1"></Spin>
      <p slot="title">预约场馆分布</p>
      <a href="#" slot="extra" @click.prevent="getMuseumDistributed">刷新</a>
      <RadioGroup v-model="open" @on-change="changeRadio" type="button">
        <Radio label>全部</Radio>
        <Radio label="true">开启预约</Radio>
        <Radio label="false">未开启预约</Radio>
      </RadioGroup>
      <div style="display: flex;justify-content: space-between;">
        <div id="echarts5" :style="{'width':(screenWidth-width)/2+'px'}" class="echarts"></div>
        <div id="echarts6" :style="{'width':(screenWidth-width)/2+'px'}" class="echarts"></div>
      </div>
      <div class="shengfen" v-show="data.length != 0">
        <p style="font-weight: bold;font-size: 20px;">{{name}} {{data.length}}家</p>
        <Table class="table" height="570" highlight-row :columns="columns" :data="data"></Table>
      </div>
    </Card>
    <Card style="margin-top:10px">
      <p slot="title" style="height:36px">
        <DatePicker @on-change="changeDate" type="date" :clearable="false" v-model="date" :editable="false" placeholder="请选择日期" style="width: 100%"></DatePicker>
      </p>
      <div class="cardFlex">
        <Card class="cardFlex_card" style="width:49%">
          <Spin fix size="large" v-if="spinShow2"></Spin>
          <p slot="title">全国场馆预约排名top10</p>
          <a href="#" slot="extra" @click.prevent="getAppointmentTop10Ranking">刷新</a>
          <div class="cardDiv">
            <div id="echarts1" style="height:415px" :style="{'width':(screenWidth-width-70)/2+'px'}"></div>
          </div>
        </Card>
        <Card class="cardFlex_card" style="width:25%">
          <Spin fix size="large" v-if="spinShow3"></Spin>
          <p slot="title">全国场馆总预约量</p>
          <a href="#" slot="extra" @click.prevent="getAllMuseumAppointmentNum">刷新</a>
          <div class="cardDiv" style="display: flex;justify-content: center;align-items: center;font-size: 70px;font-weight: bold;color:#1AAD19">{{num}}</div>
        </Card>
        <Card class="cardFlex_card" style="width:25%">
          <Spin fix size="large" v-if="spinShow4"></Spin>
          <p slot="title">全国场馆累计预约人数</p>
          <a href="#" slot="extra" @click.prevent="getGrandTotalReservationNum">刷新</a>
          <div class="cardDiv" style="display: flex;justify-content: center;align-items: center;font-size: 50px;font-weight: bold;color:#1AAD19">{{num2}}</div>
        </Card>
      </div>
    </Card>

    <div style="display: flex;margin-top:10px;justify-content: space-between;">
      <Card style="width:49.5%">
        <Spin fix size="large" v-if="spinShow5"></Spin>
        <p slot="title">微信用户复用比例分布</p>
        <a href="#" slot="extra" @click.prevent="getWxUserUsedNum">刷新</a>
        <div class="cardDiv">
          <div id="echarts2" style="height:415px;" :style="{'width':(screenWidth-width-70)/2+'px'}"></div>
        </div>
      </Card>
      <Card style="width:49.5%">
        <Spin fix size="large" v-if="spinShow6"></Spin>
        <p slot="title">统计各地区博物馆的数量</p>
        <a href="#" slot="extra" @click.prevent="getNum">刷新</a>
        <div style="display: flex;justify-content: space-between;align-items: center;">
          <Cascader :clearable="false" v-model="casc" @on-change="cascaChange" style="width:300px" :data="cascaderData" change-on-select></Cascader>
          <RadioGroup @on-change="radioChange" v-model="radio" type="button">
            <Radio label="全部"></Radio>
            <Radio label="已上线"></Radio>
            <Radio label="未上线"></Radio>
          </RadioGroup>
        </div>
        <div class="cardDiv" style="display: flex;justify-content: center;align-items: center;font-size: 100px;font-weight: bold;color:#1AAD19">{{num3}}</div>
      </Card>
    </div>

    <Card style="margin-top:10px;">
      <Spin fix size="large" v-if="spinShow7"></Spin>
      <p slot="title">筛选各个场馆的累计预约人数</p>
      <a href="#" slot="extra" @click.prevent="getMuseumAppointmentNum">刷新</a>
      <Cascader :clearable="false" v-model="casc" @on-change="cascaChange2" style="width:400px" :data="cascaderData" change-on-select></Cascader>
      <div class="cardDiv" style="margin-top:40px" :style="{'height':length*40+200+'px'}">
        <div id="echarts3" :style="{'width':screenWidth-width+15+'px','height':length*40+200+'px'}"></div>
      </div>
    </Card>

  </div>
</template>


<script>
  import "echarts/map/js/china.js";
  // import "echarts/map/js/province/anhui.js";
  export default {
    data() {
      return {
        spinShow1: false,
        spinShow2: false,
        spinShow3: false,
        spinShow4: false,
        spinShow5: false,
        spinShow6: false,
        spinShow7: false,
        open: "",
        screenWidth: document.body.clientWidth,
        width: 335,
        date: '',
        num: '',
        num2: '',
        num3: '',
        list: '',
        columns: [
          { title: "场馆名称", key: "name", align: "center" },
          { title: "注册时间", key: "gmtCreate", align: "center" },
          { title: '开启预约',align:'center',minWidth:150,key:'openAppointment2',
              render: (h, params) => {            
                const color = params.row.openAppointment2 == '开启' ? 'primary' : 'error'
                return h('Tag',{
                  props: {type: 'dot',color:color}
                },params.row.openAppointment2)
              }
          },
          { title: "详细地址", key: "address", align: "center" },
        ],
        data: [],
        name: '',
        cascaderData:[],
        cascaderStorage: [],
        cascaderStorage2: [],
        radio: '全部',
        casc: ['0'],
        length: 100,






      };
    },
    created() {
      this.getDate()

      
    },
    mounted() {
      window.onresize = () => {
        return (() => {
          this.screenWidth = document.body.clientWidth;
        })();
      };
      this.getMuseumAppointmentNum()
    },
    watch: {
      screenWidth(val) {
        let that = this;
        setTimeout(function() {
          var myChart5 = that.echarts.init(document.getElementById("echarts5"));
          var myChart6 = that.echarts.init(document.getElementById("echarts6"));
          var myChart1 = that.echarts.init(document.getElementById("echarts1"));
          var myChart2 = that.echarts.init(document.getElementById("echarts2"));
          var myChart3 = that.echarts.init(document.getElementById("echarts3"));
          myChart5.resize();
          myChart6.resize();
          myChart1.resize();
          myChart2.resize();
          myChart3.resize();
        }, 500);
      },
      "$store.state.isCollapse"(val) {
        if (val) {
          this.width = 150;
        } else {
          this.width = 335;
        }
        let that = this;
        setTimeout(function() {
          var myChart5 = that.echarts.init(document.getElementById("echarts5"));
          var myChart6 = that.echarts.init(document.getElementById("echarts6"));
          var myChart1 = that.echarts.init(document.getElementById("echarts1"));
          var myChart2 = that.echarts.init(document.getElementById("echarts2"));
          var myChart3 = that.echarts.init(document.getElementById("echarts3"));
          myChart5.resize();
          myChart6.resize();
          myChart1.resize();
          myChart2.resize();
          myChart3.resize();
        }, 500);
      }
    },
    methods: {
      cascaChange2(data){
        this.cascaderStorage2 = data
        this.getMuseumAppointmentNum()
      },
      getMuseumAppointmentNum(){
        let provinceCityParentId = this.cascaderStorage2[0] == undefined ? '0' : this.cascaderStorage2[0],
          provinceCityId = this.cascaderStorage2[1] == undefined ? '0' : this.cascaderStorage2[1],
          provinceDistrictId = this.cascaderStorage2[2] == undefined ? '0' : this.cascaderStorage2[2]
        this.spinShow7 = true;
        this.$http(
          "/stage/dataAnalysis/getMuseumAppointmentNum",
          {
            provinceCityId: provinceCityId,
            provinceCityParentId: provinceCityParentId,
            provinceDistrictId: provinceDistrictId
          },
          "post",
          res => {
            if (res.data.code == 200) {
              this.length = res.data.data.length
              let that = this
              setTimeout(function(){
                var myChart3 = that.echarts.init(document.getElementById("echarts3"));
                myChart3.resize();
              },20)
              this.draw3(res.data.data);
            } else {
              this.$Message.error(res.data.msg);
            }
            this.spinShow7 = false;
          }
        );

      },
      draw3(data){
        let source = [];
        for (let i = 0; i < data.length; i++) {
          source[i] = [];
          source[i][0] = data[i].museumName;
          source[i][1] = data[i].num;
        }
        source.push(["", ""])
        source.reverse()
        let dom = document.getElementById("echarts3");
        let myChart = this.echarts.init(dom);
        myChart.setOption({
          color: ["#1AAD19"],
          tooltip: {
            trigger: "item",
            formatter: "{c}"
          },
          dataset: {
            source: source
          },
          grid: { containLabel: true },
          xAxis: { name: "预约人数" },
          yAxis: { type: "category", name: "场馆" },
          series: [
            {
              type: "bar",
              label: {
                show: true,
                position: 'right'
              },
            }
          ]
        });
      },
      getMuseumDistributed() {
        this.spinShow1 = true;
        this.$http(
          "/stage/dataAnalysis/getMuseumDistributed",
          {
            open: this.open
          },
          "get",
          res => {
            if (res.data.code == 200) {
              this.draw5(res.data.data);
              this.draw6(res.data.data);
              this.getWxUserUsedNum()
              this.cascadeProvinceCity()
              this.getAppointmentTop10Ranking()
              this.getAllMuseumAppointmentNum()
              this.getGrandTotalReservationNum()
            } else {
              this.$Message.error(res.data.msg);
            }
            this.spinShow1 = false;
          }
        );
      },
      getMuseumInfo(name){
        this.spinShow1 = true;
        this.name = name
        this.$http(
          "/stage/museum/getMuseumInfo",
          {
            provinceName: name
          },
          "get",
          res => {
            if (res.data.code == 200) {
              for(let i=0;i<res.data.data.length;i++){
                if(res.data.data[i].openAppointment){
                  res.data.data[i].openAppointment2 = '开启'
                }else{
                  res.data.data[i].openAppointment2 = '关闭'
                }
              }
              this.data = res.data.data
            } else {
              this.$Message.error(res.data.msg);
            }
            this.spinShow1 = false;
          }
        );
      },
      draw5(data) {
        var newData = data , that = this
        for (let i = 0; i < newData.length; i++) {
          if (
            newData[i].province.charAt(newData[i].province.length - 1) == "省"
          ) {
            newData[i].province = newData[i].province.substr(
              0,
              newData[i].province.length - 1
            );
          }
        }
        for (let i = 0; i < newData.length; i++) {
          newData[i].name = newData[i].province;
          newData[i].value = newData[i].num;
        }
        let dom = document.getElementById("echarts5");
        let myChart = this.echarts.init(dom);
        myChart.setOption({
          tooltip: {
            trigger: "item"
          },
          visualMap: {
            show: true,
            x: "left",
            y: "20",
            color: [
              "#5475f5",
              "#9feaa5",
              "#85daef",
              "#74e2ca",
              "#e6ac53",
              "#9fb5ea"
            ]
          },
          series: [
            {
              name: "地区分布",
              type: "map",
              zoom: 1.1,
              mapType: "china",
              roam: false,
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: false
                }
              },
              data: newData
            }
          ]
        });
        myChart.on('click',function(params){
            that.getMuseumInfo(params.name)
        })
      },
      draw6(data) {
        let source = [["", ""]];
        for (let i = 0; i < data.length; i++) {
          source[i + 1] = [];
          source[i + 1][0] = data[i].province;
          source[i + 1][1] = data[i].num;
        }
        let dom = document.getElementById("echarts6");
        let myChart = this.echarts.init(dom);
        myChart.setOption({
          color: ["#1AAD19"],
          tooltip: {
            trigger: "item",
            formatter: "{c}"
          },
          dataset: {
            source: source
          },
          grid: { containLabel: true },
          xAxis: { name: "用户数" },
          yAxis: { type: "category", name: "省份" },
          series: [
            {
              type: "bar"
            }
          ]
        });
      },
      getDate(){
        this.date = this.getTime(new Date())
        this.getMuseumDistributed();
      },
      getAppointmentTop10Ranking(){
        this.spinShow2 = true;
        this.$http(
          "/stage/dataAnalysis/getAppointmentTop10Ranking",
          {
            date: this.getTime(this.date)
          },
          "post",
          res => {
            if (res.data.code == 200) {
              this.draw1(res.data.data)
            } else {
              this.$Message.error(res.data.msg);
            }
            this.spinShow2 = false;
          }
        );
      },
      getAllMuseumAppointmentNum(){
        this.spinShow3 = true;
        this.$http(
          "/stage/dataAnalysis/getAllMuseumAppointmentNum",
          {
            date: this.getTime(this.date)
          },
          "post",
          res => {
            if (res.data.code == 200) {
              this.num = res.data.data
            } else {
              this.$Message.error(res.data.msg);
            }
            this.spinShow3 = false;
          }
        );
      },
      getGrandTotalReservationNum(){
        this.spinShow4 = true;
        this.$http(
          "/stage/dataAnalysis/getGrandTotalReservationNum",
          {
            date: this.getTime(this.date)
          },
          "get",
          res => {
            if (res.data.code == 200) {
              this.num2 = res.data.data
            } else {
              this.$Message.error(res.data.msg);
            }
            this.spinShow4 = false;
          }
        );
      },
      changeDate(){
        this.getAllMuseumAppointmentNum()
        this.getAppointmentTop10Ranking()
        this.getGrandTotalReservationNum()
      },
      // 绘制1
      draw1(data){
        var legendData = [] , seriesData = []
        for(let i=0;i<data.length;i++){
          legendData.push(data[i].museumName)
          seriesData.push({
            name: data[i].museumName,
            value: data[i].num
          })
        }
        let dom = document.getElementById('echarts1')
        let myChart = this.echarts.init(dom)
        myChart.setOption({
          tooltip: {
              trigger: 'item',
              formatter: '{b} : {c} ( {d}% )'
          },
          label: {
              formatter: '{d}%'
          },
          toolbox: {
              show : true,
              feature : {
                  saveAsImage : {show: true}
              }
          },
          legend: {
              type: 'scroll',
              orient: 'vertical',
              left: 0,
              top: 0,
              bottom: 0,
              data: legendData,
          },
          series: [
              {
                  type: 'pie',
                  radius: '60%',
                  center: ['73%', '60%'],
                  data: seriesData,
                  emphasis: {
                      itemStyle: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  }
              }
          ]
        });
      },
      getWxUserUsedNum(){
        this.spinShow5 = true;
        this.$http(
          "/stage/dataAnalysis/getWxUserUsedNum",
          {},
          "get",
          res => {
            if (res.data.code == 200) {
              this.draw2(res.data.data)
            } else {
              this.$Message.error(res.data.msg);
            }
            this.spinShow5 = false;
          }
        );
      },
      // 绘制1
      draw2(data){
        var legendData = [] , seriesData = []
        for(let i=0;i<data.length;i++){
          legendData.push(data[i].type)
          seriesData.push({
            name: data[i].type,
            value: data[i].num
          })
        }
        let dom = document.getElementById('echarts2')
        let myChart = this.echarts.init(dom)
        myChart.setOption({
          tooltip: {
              trigger: 'item',
              formatter: '{b} : {c} ( {d}% )'
          },
          label: {
              formatter: '{d}%'
          },
          toolbox: {
              show : true,
              feature : {
                  saveAsImage : {show: true}
              }
          },
          legend: {
              type: 'scroll',
              orient: 'vertical',
              left: 0,
              top: 0,
              bottom: 0,
              data: legendData,
          },
          series: [
              {
                  type: 'pie',
                  radius: '60%',
                  center: ['73%', '60%'],
                  data: seriesData,
                  emphasis: {
                      itemStyle: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  }
              }
          ]
        });
      },
      getNum(){
        this.num3 = ''
        let provinceCityParentId = this.cascaderStorage[0] == undefined ? '0' : this.cascaderStorage[0],
            provinceCityId = this.cascaderStorage[1] == undefined ? '0' : this.cascaderStorage[1],
            provinceDistrictId = this.cascaderStorage[2] == undefined ? '0' : this.cascaderStorage[2],
            radio = 0
        if(this.radio == '全部'){radio = 0}
        if(this.radio == '已上线'){radio = 1}
        if(this.radio == '未上线'){radio = 2}
        this.$http("/stage/dataAnalysis/getMuseumNumByRegion", {
          onlineStates: radio,
          provinceCityId: provinceCityId,
          provinceCityParentId: provinceCityParentId,
          provinceDistrictId: provinceDistrictId
        }, "post", res => {
          if (res.data.code == 200) {
             this.num3 = res.data.data
          }else{
             this.$Message.error(res.data.msg);
          }
        })
      },
      cascaChange(data){
        this.cascaderStorage = data
        this.getNum()
      },
      radioChange(){
        this.getNum()
      },
      cascadeProvinceCity() {
        this.spinShow6 = true;
        this.$http("/stage/museum/cascadeProvinceCity", {}, "post", res => {
          if (res.data.code == 200) {


            for (let i = 0; i < res.data.data.length; i++) {
              this.cascaderData.push({
                value: res.data.data[i].id,
                label: res.data.data[i].name,
                children: []
              });
              for (let j = 0; j < res.data.data[i].cities.length; j++) {
                this.cascaderData[i].children.push({
                  value: res.data.data[i].cities[j].id,
                  label: res.data.data[i].cities[j].name,
                  children: []
                });
                for (
                  let z = 0;
                  z < res.data.data[i].cities[j].cities.length;
                  z++
                ) {
                  this.cascaderData[i].children[j].children.push({
                    value: res.data.data[i].cities[j].cities[z].id,
                    label: res.data.data[i].cities[j].cities[z].name
                  });
                }
              }
            }
            this.cascaderData.unshift({
              value: '0',
              label: '全国'
            })
  
            this.spinShow6 = false
            this.getNum()

          } else {
            this.$Message.error(res.data.msg);
            this.spinShow6 = false
          }
        });
      },
      changeRadio() {
        this.getMuseumDistributed();
      },



    }
  };
</script>

<style scoped>
  .echarts {
    height: 700px;
  }
  .cardFlex{
    width:100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .cardFlex_card{
    height:500px;
  }
  .cardDiv{
    width:100%;
    height:415px;
  }
  .shengfen{
    width:100%;
    height:600px;
    margin-top:-20px;
  }
</style>